<template>
  <!-- 养殖作业 -->
  <div class="page-content">
    <!-- 搜索栏组件 flag:等所有数据获取到 searchByType1data：基地 searchByType2data：操作名称 
          type2Name：档案和作业第二个分类搜索名称不一样，养殖作业：操作名称-->
    <OperationsSearchBar v-if="flag" :searchByType1data="searchByType1data" :searchByType2data="searchByType2data"
       :type2Name="type2Name" @getDataBySelectType2="getDataBySelectType2"
      @getDataBySelectTime="getDataBySelectTime" @getDataBySelectType1="getDataBySelectType1"
      @getDataByKeyword="getDataByKeyword"></OperationsSearchBar>
    <!-- 表格区域 -->
    <!-- 表格功能区 -->
    <div style="height: 20px; width:100%">
    </div>
    <TableBar :columns="columns" @changeColumn="changeColumn" :layout="layout">
      <div slot="bottom" style="width: 350px;">
        <el-row>
          <el-col :span="5">
            <el-button plain size="mini" type="primary" @click=" tableAdd_visible=true " v-auth="'breed_job_insert'">新增
            </el-button>
          </el-col>
          <el-col :span="5">
            <el-button plain size="mini" type="danger" @click="delDataBySelectBox">删除</el-button>
          </el-col>
          <el-col :span="5">
            <el-tooltip effect="dark" content="导入养殖作业EXCEL文件" placement="top-start">
              <el-upload action="http://120.77.156.205:9603/breed/farming-work/excel" :show-file-list="false">
                <el-button plain type="success" size="mini" @click="refresh" v-auth="'breed_job_insert'">导入</el-button>
              </el-upload>
            </el-tooltip>
          </el-col>
          <el-col :span="5">
            <el-tooltip effect="dark" content="导出为EXCEL文件" placement="top-start">
              <el-button type="success" plain size="mini" @click="downLoadExcel" v-auth="'breed_job_select'">导出
              </el-button>
            </el-tooltip>
          </el-col>
          <!-- 部分导出，后端未完成，可后续增加 -->
          <!-- <el-col :span="5"
                ><el-tooltip
                  effect="dark"
                  content="选择导出为EXCEL文件"
                  placement="top-start"
                  ><el-button type="success" plain size="mini" @click="downLoadSelectExcel"
                  >选择导出</el-button
                ></el-tooltip></el-col> -->
        </el-row>
      </div>

    </TableBar>
    <!-- 表格数据 getDataBySelectBox：选中框数据-->
    <TheTable :data="data" ref="tableRef" :page="page" @changeSize="changeSize" @changePage="changePage"
      :showPage="showPage" :Bottom="35" @getDataBySelectBox="getDataBySelectBox">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <!-- 操作名称 -->
      <el-table-column :label="columns[0].name" v-if="columns[0].show" :prop="columns[0].prop" width="120">
      </el-table-column>
      <!-- 操作时间 -->
      <el-table-column :label="columns[1].name" v-if="columns[1].show" :prop="columns[1].prop" width="100"
        :formatter="formatDate" sortable>
      </el-table-column>
      <!-- 生产档案 -->
      <el-table-column :label="columns[2].name" v-if="columns[2].show" :prop="columns[2].prop" width="180">
      </el-table-column>
      <!-- 投入品名 -->
      <el-table-column :label="columns[3].name" v-if="columns[3].show" :prop="columns[3].prop" width="150">
      </el-table-column>
      <!-- 基地名 -->
      <el-table-column :label="columns[4].name" v-if="columns[4].show" :prop="columns[4].prop" width="130">
      </el-table-column>
      <!-- 仓库 -->
      <el-table-column :label="columns[5].name" v-if="columns[5].show" :prop="columns[5].prop" width="130">
      </el-table-column>
      <!-- 产品SKU -->
      <el-table-column :label="columns[6].name" v-if="columns[6].show" :prop="columns[6].prop" width="80">
      </el-table-column>
      <!-- 投入品SKU -->
      <el-table-column :label="columns[7].name" v-if="columns[7].show" :prop="columns[7].prop" width="110">
      </el-table-column>
      <!-- 投入品数量 -->
      <el-table-column :label="columns[8].name" v-if="columns[8].show" :prop="columns[8].prop" width="100">
      </el-table-column>
      <!-- 投入品规格 -->
      <el-table-column :label="columns[9].name" v-if="columns[9].show" :prop="columns[9].prop" width="100">
      </el-table-column>
      <!-- 作业编号 -->
      <el-table-column :label="columns[10].name" v-if="columns[10].show" :prop="columns[10].prop" width="180">
      </el-table-column>
      <!-- 操作人 -->
      <el-table-column :label="columns[11].name" v-if="columns[11].show" :prop="columns[11].prop" width="100">
      </el-table-column>
      <!-- 投入品供应商 -->
      <el-table-column :label="columns[12].name" v-if="columns[12].show" :prop="columns[12].prop" width="180">
      </el-table-column>
      <!-- 图片 目前不使用，后续如果不需要可删除相关代码，新增和删除表单组件中含有-->
      <el-table-column :label="columns[13].name" v-if="columns[13].show" :prop="columns[13].prop" width="100">
        <template slot-scope="scope">
          <img :src="scope.row.picture" alt="" width="60px" height="60px"
            v-show="scope.row.picture!='' && scope.row.picture!='string'" />
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column :label="columns[14].name" v-if="columns[14].show" width=auto min-width="180" fixed="right">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" plain @click="tableEdit(scope.row)" v-auth="'breed_job_update'">编辑
          </el-button>
          <el-button size="mini" type="danger" plain @click="tableDelet(scope.row)" v-auth="'breed_job_delete'">删除
          </el-button>
        </template>
      </el-table-column>
    </TheTable>
    <div v-if="flag">
      <!-- farmingIdList：养殖档案信息 farmingOperateList：养殖操作名称 supplySkuList：投入品相关信息 前面这些都是用于选择器
          finish：点击确定后执行finish刷新页面 -->
      <OperationTableEditForm v-show="tableEdit_visible" :editform="editform" :tableEdit_visible="tableEdit_visible"
        :farmingIdList="farmingIdList" :farmingOperateList="farmingOperateList" :supplySkuList="supplySkuList"
        @closeEditDialog="closeEditDialog" @finish="finish"></OperationTableEditForm>
    </div>
    <div v-if="flag">
      <!-- 同上 -->
      <OperationTableAddForm v-show="tableAdd_visible" v-if="flag" :tableAdd_visible="tableAdd_visible"
        :farmingIdList="farmingIdList" :farmingOperateList="farmingOperateList" :supplySkuList="supplySkuList"
        @closeAddDialog="closeAddDialog" @finish="finish"></OperationTableAddForm>
    </div>
  </div>

</template>

<script>
  // 搜索栏
  import OperationsSearchBar from '@/components/ProductionManagement/Operations/OperationsSearchBar'
  // 表格编辑表单弹窗
  import OperationTableEditForm from '@/components/ProductionManagement/Operations/OperationTableEditForm'
  // 新增养殖作业
  import OperationTableAddForm from '@/components/ProductionManagement/Operations/OperationTableAddForm'
  // 接口数据
  import {
    getAllInfoByData,
    searchOperationsKeyword,
    delOneOperation,
    delOperations,
    operationGetFarmingId,
    getSupplyAll,
    getColumns,
    formatDateToDialog
  } from "../../Api/productionmanage/Operations"
  import {
    getFarmingOperateOptions
  } from "../../Api/productionmanage/BreedingOperation"
  // 获取基地信息
  import {
    getBaseInfo
  } from '@/Api/productionmanage/Breed_base'
  // import { getSKU } from '@/Api/productionmanage/ProductManage'
  export default {
    name: 'Operations',
    components: {
      // 搜索栏
      OperationsSearchBar,
      // 编辑表单
      OperationTableEditForm,
      // 新增表单
      OperationTableAddForm
    },

    data() {
      return {
        // 搜索栏分类数据
        // 基地
        searchByType1data: [],
        // 操作名称
        searchByType2data: [],
        type2Name: "操作名称",
        showPage: true,
        // 存放请求回来的数据
        data: [],
        // 表头
        columns: getColumns(),
        // 搜索内容（时间，类别，关键词）
        searchData: {
          startTime: null,
          overTime: null,
          operateName: null,
          baseName: null,
        },
        // 表格编辑表单显示与隐藏
        tableEdit_visible: false,
        tableAdd_visible: false,
        editform: {},
        // 传递给TheTable的数据
        page: {
          total: 0,
          pageSize: 10,
          current: 1,
        },
        // 表格选中框
        idBySelectBox: [],
        // 选中多选框的信息列表
        selectedBoxList: [],
        // 导入Excel
        putInfileList: [],
        // 表头右侧 即TableBar右侧要显示的功能按钮
        layout: 'refresh, column',
        // 图片更新
        flag: false,
        // 关键词搜索
        keyWord: "",
        // Options选择器同时用于搜索栏和新增编辑表单
        // 养殖操作级联选择器
        operateOptions: [],
        // 养殖基地级联选择器
        baseOptions: [],
        // List选择器只用于新增编辑表单
        // 养殖操作选择器
        farmingOperateList: [],
        // 投入品SKU 下拉选择
        supplySkuList: [],
        // 表格养殖档案选择器
        farmingIdList: [],
      }
    },

    created() {
      this.getAllList();
      this.getBaseInfo();
      this.GetFarmingId();
      this.getSupplyAll();
      // 执行完后flag=true
      this.GetFarmingOperate();
      
    },
    mounted() {
      // 养殖档案跳转来时，搜索传来的档案id
      this.searchByProductionInfoId();
    },
    methods: {
      // 查询所有数据
      async getAllList() {
        console.log("type" , this.searchData);
        const {
          data: res
        } = await getAllInfoByData(
          this.page.current,
          this.page.pageSize,
          this.searchData
        );
        if (res.statusCode == 20000) {
          if (res.data === null) {
            return this.$message.warning("搜索范围内无数据");
          }
          this.data = res.data.records;
          this.page.total = parseInt(res.data.total);
          console.log("getAllList:",this.data)
        } else {
          this.$message.error("查询养殖作业数据失败");
        }

      },
      // 搜索栏关键词查询数据
      async searchByKeyword(w) {
        console.log("keyword:" + w)
        if (w != undefined) {
          this.keyWord = w;
        }
        const {
          data: res
        } = await searchOperationsKeyword(
          this.page.current,
          this.page.pageSize,
          this.keyWord
        );
        if (res.statusCode == 20000) {
          if (res.data === null) {
            return this.$message.warning("搜索范围内无数据!");
          }
          this.data = res.data.records;
          console.log("keysearch",this.data);
          this.page.total = parseInt(res.data.total);
          this.$message.success("查询养殖作业数据成功");
        } else {
          return this.$message.error("查询养殖作业数据失败");
        }
      },
      // 获取投入品信息
      async getSupplyAll() {
        await getSupplyAll().then(res => {
          this.supplySkuList = res.data.data;
        })
      },
      // 养殖作业获取养殖档案信息
      async GetFarmingId() {
        const {
          data: res
        } = await operationGetFarmingId();
        if (res.statusCode == 20000) {
          this.farmingIdList = res.data;
        } else {
          this.$message.error(res.message);
        }
      },
      // 获取养殖基地数据
      async getBaseInfo() {
        await getBaseInfo(this.page).then(res => {
          if (res.data.statusCode !== 20000) {
            return this.$message.error('请求基地数据失败，请手动输入基地Id')
          }
          var arr = [];
          arr = res.data.data.records;
          // console.log(arr);
          for (let i = 0; i < arr.length; i++) {
            var obj = {
              label: "",
              value: ""
            };
            obj.label = arr[i].name;
            obj.value = arr[i].id;
            this.baseOptions.push(obj);
          }
          this.searchByType1data = this.baseOptions;
        })
      },
      // 养殖作业获取养殖操作信息
      async GetFarmingOperate() {
        const {
          data: res
        } = await getFarmingOperateOptions();
        if (res.statusCode == 20000) {
          // 新增编辑表单选择器
          this.farmingOperateList = res.data;
          // 级联选择器
          for (let i = 0; i < res.data.length; i++) {
            var obj = {
              label: "",
              value: ""
            };
            obj.label = res.data[i];
            obj.value = i;
            this.operateOptions.push(obj)
          }
          this.searchByType2data = this.operateOptions;
        } else {
          this.$message.error("查询养殖操作信息失败");
        }
        this.flag=true;
      },
      
      // 通过表格选择box批量删除养殖作业
      async delDataBySelectBox() {
        // console.log(this.idBySelectBox);
        const {
          data: res
        } = await delOperations(this.idBySelectBox);
        if (res.statusCode == 20000) {
          this.$message('已成功删除选中的养殖作业');
          this.getAllList();
        } else {
          this.$message.error("删除该养殖作业失败");
        }
      },
      // 删除养殖作业
      async tableDelet(a) {
        const {
          data: res
        } = await delOneOperation(a.id);
        if (res.statusCode == 20000) {
          this.$message('已成功删除该养殖作业');
          this.getAllList();
        } else {
          this.$message.error("删除该养殖作业失败");
        }
      },
      // 获取养殖档案传来的id,搜索该养殖档案下所有养殖作业
      searchByProductionInfoId() {
        if (this.$route.query.id) {
          setTimeout(() => {
            this.searchByKeyword(this.$route.query.id);
          }, 1000);
        }

      },
      // 获取搜索栏选择的时间范围
      getDataBySelectTime(t) {
        if (t == null) {
          this.searchData.startTime = null;
          this.searchData.overTime = null;
        } else {
          var startTime = t[0];
          var overTime = t[1];
          this.searchData.startTime = startTime;
          this.searchData.overTime = overTime;
        }
        this.getAllList();
      },
      // 获取搜索栏选择的分类
      // 基地
      getDataBySelectType1(type) {
        console.log(type)
        if (type == "") {
          this.searchData.baseName = null;
        } else {
          this.searchData.baseName = type;
        }
        console.log("getDataBySelectBase:",this.searchData);
        this.getAllList();
      },
      // 操作名称
      getDataBySelectType2(type) {
        if (type.length == 0) {
          this.searchData.operateName = null;
        } else {
          this.searchData.operateName = type;
        }
        console.log("getDataBySelectOpearte:",this.searchData);
        this.getAllList();
      },
      // 获取搜索栏选择的关键词
      getDataByKeyword(w) {
        // console.log(w)
        if (w == "") {
          this.getAllList();
        } else {
          this.searchByKeyword(w);
        }
      },
      // 获取表格选择的数据
      getDataBySelectBox(w) {
        this.selectedBoxList = w;
        if (w.length == 0) {
          this.getAllList();
        } else {
          var arr = [];
          for (var i = 0; i < w.length; i++) {
            arr.push(w[i].id);
          }
          this.idBySelectBox = arr;
          console.log(this.idBySelectBox);
        }
      },
      // 新增编辑完成后获取最新数据
      finish() {
        this.page.current = 1;
        this.getAllList()
      },
      //导入Excel刷新
      refresh() {
        this.$refs.tableRef.getAllList();
      },
      // 导出EXCEL
      downLoadExcel() {
        let name = "养殖作业信息";
        window.location.href = `http://120.77.156.205:9603/breed/farming-work/${name}`;
      },
      // 点击表格编辑按钮,传值到表单
      tableEdit(a) {
        console.log(a);
        a.operateTime = formatDateToDialog(a.operateTime);
        this.editform = a;
        this.flag = true;
        this.tableEdit_visible = true;
      },
      // 表格编辑表单弹窗隐藏
      closeEditDialog(a) {
        this.tableEdit_visible = a;
        this.getAllList()
      },
      closeAddDialog(a) {
        this.tableAdd_visible = a;
        this.getAllList()
      },
      // 选择显示隐藏列
      changeColumn(newcolumns) {
        this.columns = newcolumns
      },
      // 分页 改变页码
      changePage(a) {
        this.page.current = a.current
        if (this.keyWord != "" && this.keyWord != undefined) {
          this.searchByKeyword();
        } else {
          this.getAllList();
        }
      },
      // 分页 改变每页显示的条数
      changeSize(a) {
        this.page.pageSize = a.pageSize
        if (this.keyWord != "" && this.keyWord != undefined) {
          this.searchByKeyword();
        } else {
          this.page.current = 1;
          this.getAllList();
        }
      },
      // 格式化时间
      formatDate(row, column) {
        let a = row[column.property];
        return formatDateToDialog(a);
      },
    },
  }

</script>

<style>
</style>
